<template>
    <div>
      <sticky
        scroll-box="vux_view_box_body"
        :check-sticky-support="false"
        >
        <tab class="good-order-tab"  default-color="#161616" active-color="#42a5f5">
          <tab-item v-for="(v,i) in tabList" :key="i" :selected="tabIndex==i" @on-item-click="changeOrderList">{{v}}</tab-item>
        </tab>
      </sticky>

        <ul class="good-order-list">
          <li v-for="(v,i) in orderListOther || orderList" :key="i">
            <div class="top">
              <span>魔镜商城</span>
              <p>{{v.txtSts | changeToText('txtSts')}}</p>
            </div>
             <good-info
               style="margin-bottom:15px"
               :goodPic="v.rsvFld"
              :goodsName="v.goodsName"
              :specType="v.specType"
              :spec="v.spec"
              :goodsPrice="v.txnAmt"
              :goodsNum="1"
            />
            <flexbox  class="operation vux-1px-t" justify="flex-end" >
              <flexbox-item span="85">
                <x-button type="warn" class="buy-btn" @click.native="confirm(v.orderNo,'A')">删除</x-button>
              </flexbox-item>
              <flexbox-item span="85" v-if="v.txtSts=='I'">
                <x-button class="buy-btn" @click.native="changeSts(v.orderNo,'C')">取消订单</x-button>
              </flexbox-item>
              <flexbox-item span="85" v-if="v.txtSts=='I'">
                <x-button class="buy-btn" @click.native="changeSts(v.orderNo,'S')">付款</x-button>
              </flexbox-item>
            </flexbox >
          </li>
        </ul>
    </div>
</template>

<script>
     import goodInfo from '../components/goodInfo.vue'
     import {mapState,mapActions} from 'vuex'
     import {AlertModule} from 'vux'
    export default {
        name: "good-order",
        components:{
        	goodInfo
        },
        data(){
        	return {
        		tabIndex:0,
        		tabList:[
        			'待付款',
        			'待发货',
        			'待收货',
        			'待评价'
        		],
            statusKV:{
        		  1:'I',
        		  2:'D',
        		  3:'T',
        		  4:'E'
            },
            page:'1',
            limit:'10',
            orderListOther:null
        	}
        },
        computed:{
          ...mapState({
            orderList:function (state) {
              return state.order.orderList ? state.order.orderList :  this.getOrderData()
            }
          }),

        },
        methods: {
          ...mapActions([
            'queryGetOrderList',

          ]),

          changeOrderList(index){
            if(index){
              this.orderListOther =this.orderList.filter(v=>v.txtSts===this.statusKV[index])
            }else{
              this.orderListOther = null
            }

          },
          confirm(orderNo,status){
            let vm = this
            this.$vux.confirm.show({
              title:'确定删除？',
              onConfirm() {
                vm.changeSts(orderNo,status)
              }
            })
          },
          changeSts(orderNo,status){
            this.$axios.post(this.$store.state.orderSubmit,{
              orderNo: orderNo,
              txtSts:status==='C' ? 'A' : status
            }).then(res=>{
              console.log(res)
              let text = ''
              switch (status) {
                case 'S':
                //this.Util.wechatPay()
                break;
                case 'A':
                text = '删除成功'
                break;
                case 'C':
                text = '取消成功'
                break;

              }
              AlertModule.show({
                title: '提示！',
                content: text,
              })
              this.getOrderData()
            }).catch(e=>{
              console.log(e)
            })
          },
          getOrderData(){
            this.$vux.loading.show()
            let params = {
              openId:sessionStorage.getItem('openId'),
              page:this.page,
              limit:this.limit
            }
            this.queryGetOrderList(params).catch(e=>{
              console.log(e)
            }).finally(()=>{
              this.$vux.loading.hide()
            })
          }
        }
    }
</script>

<style scoped>
.good-order-tab{

}

.good-order-tab .vux-tab-item{
	font-size: 12px;
	flex:1;
	 background: none;
}
.good-order-list{
	padding:0 4%;
}
.good-order-list li{
	padding-top:15px;
}
.good-order-list .top{
	overflow: hidden;
	margin-bottom: 8px;
}
.good-order-list .top p{
	float: right;
	color:#f04b3e;
}
.operation{
	padding:15px 0;
}
.operation .weui-btn{
	font-size: 12px;
	line-height: 32px;
}
</style>
